<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选择</td>
                    <td>商品名称</td>
                    <td>商品描述</td>
                    <td>商品单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in goods" :key="i">
                    <td>{{i+1}}</td>
                    <td><input type="checkbox" v-model="v.check"></td>
                    <td>
                        <h2>{{v.title}}</h2>
                    </td>
                    <td><img :src="url" alt="" width="50" height="50"></td>
                    <td><input type="number" v-model="v.price" disabled></td>
                    <td><input type="number" min="1" v-model.number="v.count" @input="limitValue($event,v,i)"></td>
                    <td>{{v.price*v.count}}</td>
                    <td><button @click="goods.splice(i,1)">删除</button></td>
                </tr>
            </tbody>
        </table>

        <div>
            <div>
                <input type="checkbox" v-model="quan">全选
            </div>
            <p><button @click="delCheck">选中删除</button></p>
            <p>总计：{{total}}----选中总计: {{ctotal }}</p>
            <p>总数：{{amount}}----选中总数: {{camount }}</p>

            <hr>

            <p>总计：{{all}}----选中总计: {{checkall }}</p>
            <p>总数：{{allNum}}----选中总数: {{checkNum }}</p>


        </div>

    </div>


    <script>
        const vm = new Vue({
            data: {
                title: "Vue 实现简单的购物车逻辑 ",
                goods: [  // 商品数据 
                    { check: false, title: "上衣", price: 200, count: 10 },
                    { check: true, title: "裤子", price: 100, count: 10 },
                    { check: false, title: "鞋子", price: 500, count: 10 },
                    { check: false, title: "风衣", price: 1000, count: 10 },
                    { check: true, title: "帽子", price: 300, count: 10 },
                    { check: true, title: "西服", price: 2000, count: 10 },
                ],
                url: "http://47.104.209.44/base/imgs/42.jpg",
                total: 0,
                ctotal: 0,
                amount: 0,
                camount: 0
            },
            computed: {
                quan: {
                    get() {
                        return this.goods.length > 0 ? this.goods.every(item => item.check) : false;
                    },
                    set(v) {
                        this.goods = this.goods.map(item => {
                            item.check = v;
                            return item;
                        })
                    }
                },
                all() {
                    return this.goods.reduce((prev, item) => (prev + item.price * item.count), 0)
                },
                checkall() {
                    return this.goods.reduce((prev, item) => {
                        return prev + (item.check ? item.price * item.count : 0)
                    }, 0)
                },
                allNum() {
                    return this.goods.reduce((prev, item) => (prev + item.count), 0)
                },
                checkNum() {
                    return this.goods.reduce((prev, item) => {
                        return prev + (item.check ? item.count : 0)
                    }, 0)
                }
            },

            methods: {
                delCheck() {
                    this.goods = this.goods.filter(item => !item.check)
                },
                limitValue(e, v, i) {
                    if (e.target.value < 1) {
                        // console.log(v);
                        v.count = 1;
                        this.goods.splice(i, 1, v)
                    }
                }
            },
            watch: {
                goods: {
                    deep: true,
                    handler(c) {
                        console.log(c);
                        this.total = 0;
                        this.ctotal = 0;
                        this.amount = 0;
                        this.camount = 0;
                        c.forEach(item => {
                            this.total += item.price * item.count;
                            this.amount += item.count;
                            this.ctotal += item.check ? item.price * item.count : 0;
                            this.camount += item.check ? item.count : 0;
                        })
                    }
                }
            },
            mounted() {
                this.goods.forEach(item => {
                    this.total += item.price * item.count;
                    this.amount += item.count;
                    this.ctotal += item.check ? item.price * item.count : 0;
                    this.camount += item.check ? item.count : 0;
                })
            }



        }).$mount('#app')




    </script>
</body>

</html>